<template>
	<view class="app-container" :style="{height: `calc(100vh - ${getHeight}px)`}">
		<view class="navbar">
			<view class="title">
				约课狮
			</view>
			<view class="con">
				<view class="left" @click="go('/subpackages/pagesA/teacherList/index')">
					<view class="icon">
						<u-icon name="file-text-fill" size="40" color="#ffffff"></u-icon>
					</view>
					<view class="tit">
						约课
					</view>
					<view class="tips">
						选择老师和课程
					</view>
				</view>
				<view class="right" @click="go('/pages/addTeacher/index')">
					<view class="icon">
						<u-icon name="man-add-fill" size="40" color="#9333ea"></u-icon>
					</view>
					<view class="tit">
						成为老师
					</view>
					<view class="tips">
						申请成为课程老师
					</view>
				</view>
			</view>
		</view>
		<view class="row-a1">
			<view class="title">
				<view class="left">
					热门课程
				</view>
				<view class="right" @click="go('/subpackages/pagesA/classList/index')">
					<view class="text">
						查看全部
					</view>
					<u-icon size="18" color="#4172ec" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="list">
				<u-list @scrolltolower="scrolltolower" height="100%">
					<u-list-item v-for="(item, index) in list" :key="index">
						<view class="item" @click="go('/pages/classInfo/index')">
							<view class="left">
								<view :class="getClass(index) + ''">
									<u-icon :name="getName(index)" size="40" :color="getColor(index)"></u-icon>
								</view>
								<view class="con">
									<view class="a1">
										雅思写作高分技巧
									</view>
									<view class="a2">
										<view class="type">
											雅思
										</view>
										<view class="teacher">
											<view class="icon">
												<u-icon name="account-fill" size="18"></u-icon>
											</view>
											<view class="name">
												张老师
											</view>
										</view>
									</view>
									<view class="a3">
										<view class="icon">
											<u-icon name="clock-fill" size="16"></u-icon>
										</view>
										<view class="time">
											14:00 - 15:30
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="text">
									查看详情
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<view class="row-a2">
			<view class="title">
				<view class="left">
					热门课程
				</view>
				<view class="right" @click="go('/subpackages/pagesA/teacherList/index')">
					<view class="text">
						查看全部
					</view>
					<u-icon size="18" color="#4172ec" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index"
					@click="go('/subpackages/pagesA/classList/index')">
					<view class="avatar">
						<u-image width="80px" height="80px"
							src="https://intstu-4g5o0w3q58960fe0-1258616199.tcloudbaseapp.com/resources/2025-08/lowcode-2353050">
						</u-image>
					</view>
					<view class="name">
						张老师
					</view>
				</view>
			</view>
		</view>
		<tabbar :name="0"></tabbar>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import tabbar from "@/components/tabbar/index.vue";
	import {
		checkSession
	} from "@/api/login.js"
	export default {
		data() {
			return {
				current: 1,
				list: [0, 1, 2, 3, 4, 5, 6],
				page: {
					pageSize: 10,
					pageNum: 0,
				}
			}
		},
		components: {
			tabbar
		},
		computed: {
			getHeight(){
				return this.$globalVariable.height;
			},
			getClass() {
				return (ind) => {
					if (ind == 0) {
						return "icon one";
					} else if (ind == 1) {
						return "icon two";
					} else if (ind == 2) {
						return "icon three";
					} else if (ind == 3) {
						return "icon four";
					} else {
						return "icon one";
					}
				}
			},
			getName() {
				return (ind) => {
					if (ind == 0) {
						return "edit-pen-fill";
					} else if (ind == 1) {
						return "bookmark-fill";
					} else if (ind == 2) {
						return "server-man";
					} else if (ind == 3) {
						return "coupon-fill";
					} else {
						return "edit-pen-fill";
					}
				}
			},
			getColor() {
				return (ind) => {
					if (ind == 0) {
						return "#0369a1";
					} else if (ind == 1) {
						return "#0d9488";
					} else if (ind == 2) {
						return "#c2410c";
					} else if (ind == 3) {
						return "#6b21a8";
					} else {
						return "#0369a1";
					}
				}
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			search() {

			},
			click() {

			},
			go(page) {
				uni.$u.route({
					url: page
				})
			},
			scrolltolower() {

			},
			getList() {

			},
			session() {
				let that = this;
				if (uni.getStorageSync("token") && uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo")._id) {
					let param = {
						"session_key": uni.getStorageSync("token"),
						"openid": uni.getStorageSync("userInfo").openid
					}
					checkSession(param).then(res => {
						if (res.code == 200) {
							that.setUserInfo(uni.getStorageSync("userInfo"));
						}
					})
				} else {
					// that.goLogin();
				}
			},
			goLogin() {
				uni.$u.route({
					url: "/pages/login/index",
					type: "reLaunch"
				})
			}
		},
		onShow() {
			this.session();
			this.getList();
		},
		onLoad() {},
		onLaunch() {

		}
	}
</script>

<style lang="scss">
	.app-container {
		overflow: hidden;
		.navbar {
			height: 195px;
			box-sizing: border-box;

			.title {
				padding: 10px;
				background-color: #fff;
				font-weight: bold;
			}

			.con {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				padding: 10px;
				background-color: #f5f5f5;

				.left,
				.right {
					box-shadow: #e8e2e7 0px 1px 2px 1px;
					width: 45%;
					border-radius: 20px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 20px 0;
					transition: all .3s;

					.icon {
						margin-bottom: 5px;
					}

					.tit {
						margin-bottom: 5px;
					}

					&:hover {
						transform: scale(1.1);
					}
				}

				.left {
					color: #fff;
					background-color: #1e51db;
				}

				.right {
					background-color: #fff;
				}
			}
		}

		.row-a1 {
			height: calc(100vh - 195px - 200px - 50px);
			margin: 0 10px;
			margin-bottom: 10px;
			box-sizing: border-box;
			padding: 10px;
			background-color: #fff;

			.title {
				margin-bottom: 10px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 32rpx;
					font-weight: bold;
				}

				.right {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					font-size: 16px;
					color: #4172ec;
				}
			}

			.list {
				height: calc(100% - 31px);
				box-sizing: border-box;
				padding-bottom: 10px;

				.item {
					padding: 10px;
					margin-bottom: 10px;
					border-radius: 10px;
					box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-end;

					.left {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						&>.icon {
							margin-right: 10px;
							border-radius: 8px;
							overflow: hidden;

							&.one {
								background-color: #e0f2fe;
							}

							&.two {
								background-color: #f0fdfa;
							}

							&.three {
								background-color: #fef3c7;
							}

							&.four {
								background-color: #f3e8ff;
							}
						}

						.con {
							.a1 {
								font-size: 18px;
								font-weight: bold;
								margin-bottom: 5px;
							}

							.a2,
							.a3 {
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								align-items: center;
							}

							.a2 {
								font-size: 12px;
								padding: 2px 8px;
								border-radius: 2px;
								color: #93788f;
								margin-bottom: 5px;

								.type {
									margin-right: 5px;
									background-color: #f3f4f6;
								}

								.teacher {
									display: flex;
									flex-direction: row;
									justify-content: flex-start;
									align-items: center;
								}

								.name {
									background-color: none;
								}
							}

							.a3 {
								font-size: 12px;
								color: #93788f;
							}
						}
					}

					.right {
						.text {
							font-size: 24rpx;
							color: #4172ec;
						}
					}
				}
			}
		}

		.row-a2 {
			background-color: #fff;
			height: 180px;
			box-sizing: border-box;
			margin: 0 10px;
			border-radius: 10px;

			.title {
				padding: 10px;

				margin-bottom: 10px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 32rpx;
					font-weight: bold;
				}

				.right {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					font-size: 16px;
					color: #4172ec;
				}

				.icon {
					margin-right: 10px;
				}
			}

			.list {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				overflow: auto;
				padding: 0 10px;

				.item {
					background-color: #ffffff;
					margin-right: 20px;
					box-sizing: border-box;
					text-align: center;
					width: 80px;
					min-width: 80px;
					height: 110px;
					min-height: 110px;

					.avatar {
						width: 80px;
						height: 80px;
						border-radius: 50%;
						overflow: hidden;
						margin-bottom: 2px;
					}

					.name {
						font-size: 14px;
					}
				}
			}
		}
	}
</style>